<template>
  <dv-scroll-board class="use-board" :config="config" />
</template>

<script>
import api from '../utils/api';
import { formatUserDate } from '../utils/datetime';
export default {
  data() {
    return {
      config: {
        headerBGC: 'transparent',
        headerHeight: 46,
        oddRowBGC: '#17325B',
        evenRowBGC: '#0C1B48',
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
        header: ['市场名称', '经营户', '商品名称', '检测项目', '检测结果', '检测时间'],
        data: [],
      },
    };
  },
  created() {},
  mounted() {
    api.slekjsjByPFMarket().then((res) => {
      if (res.data.length > 0) {
        let list = [];
        res.data.forEach((item) => {
          let str = '';
          if (item.jcjg == '合格') {
            str = '<span style="color:#1AED83;">合格</span>';
          } else {
            str = `<span style="color:red;">${item.jcjg}</span>`;
          }
          list.push([
            item.jiancheng,
            item.lianxir,
            item.ypmc,
            item.jcxm,
            str,
            formatUserDate(item.jcsj, 'yyyy-MM-dd'),
          ]);
        });
        this.config = {
          headerBGC: 'transparent',
          headerHeight: 46,
          oddRowBGC: '#17325B',
          evenRowBGC: '#0C1B48',
          columnWidth: [120, 70, 70, 120, 70, 100],
          align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
          header: ['市场名称', '经营户', '商品名称', '检测项目', '检测结果', '检测时间'],
          data: list,
        };
      }
    });
  },
};
</script>

<style lang="less">
.use-board {
  .header {
    .header-item {
      font-size: 14px;
      padding: 0 !important;
    }
  }
  .rows {
    .row-item {
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
